<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>营销满减</title>
  <link rel="stylesheet" href="../../css/wang_zheng_ze/coupons.css">
  <link rel="stylesheet" href="../../js/wang_zheng_ze/bootstrap-5.1.3-dist/css/bootstrap.min.css">
  <script src="../../js/wang_zheng_ze/bootstrap-5.1.3-dist/js/jq.js"></script>
  <script src="../../js/wang_zheng_ze/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
  <script src="../../js/wang_zheng_ze/coupons.js"></script>
</head>

<body>
  <!-- 头部和查询 -->
  <div class="container-fluid" id="homeBox">
    <!-- 满减列表 -->
    <div class="row indexContent">
      <div class="card-header">
        <span>优惠券列表（共<span id="dataAll">80</span>条）</span>
      </div>
    </div>

    <!-- 活动名称和活动状态 -->
    <div class="row Search-bar">
      <div class="Search">
        <!-- 输入活动名称 -->
        <div class="Search-activity">
          <label for="activityName"><span class="Search-text">优惠券名称</span></label>
          <input type="text" placeholder="请输入活动名称" id="activityName" class="Input-box">
        </div>
      </div>
      <!-- 起止时间 -->
      <div class="Search-time">
        <div class="Start-time">
          <label for=""><span class="Search-text">起始时间</span></label>
          <input class="Input-box" type="datetime-local" id="queryArTime">
        </div>
        <div class="end-time">
          <label for=""><span class="Search-text">结束时间</span></label>
          <input type="datetime-local" class="Input-box" id="queryEnTime">
        </div>
      </div>
      <button type="button" class="btn btn-info" id="okSearch">搜索</button>
      <button type="button" class="btn btn-info" id="noSearch">返回</button>
    </div>

    <!-- 添加满减 -->
    <div class="operate">
      <button type="button" class="btn btn-info" id="addFullReduction">添加优惠券</button>
      <p class="operateRecording">共<span id="disData">10</span>条数据</p>
    </div>

    <!-- 表格 -->
    <div>
      <table class="table table-bordered">
        <tr class="tableHeader">
          <th>优惠券名称</th>
          <th>优惠券价值</th>
          <th>活动状态</th>
          <th>生效时间</th>
          <th>结束时间</th>
          <th>已发放</th>
          <th>已使用</th>
          <th class="caoZuo">操作</th>
        </tr>
        <tbody id="fullReductionData"></tbody>
      </table>
      <!-- 页码 -->
      <nav class="paginationBox" id="paginationBox-class">
        <ul class="pagination" id="pagination-class">
          <li class="styPage">
            <span>&laquo;</span>
          </li>
          <div class="pageBox" id="pageNumber"></div>
          <li class="styPage">
            <span>&raquo;</span>
          </li>
        </ul>
        <div class="jumpPage">调至<input type="text" placeholder="2" id="inPage">页</div>
        <button class="okJump">确定</button>
      </nav>
    </div>
  </div>
  <!-- 确认删除框 -->
  <div class="modalDel">
    <span class="aAA">确定删除此条优惠券信息？</span>
    <div>
      <button type="button" class="btn btn-primary" id="noDel">取消</button>
      <button type="button" class="btn btn-primary" id="yesDel">确认</button>
    </div>
  </div>

  <!-- 添加优惠券 -->
  <div class="container-fluid" id="noneBox">
    <!-- 标题 -->
    <div class="row indexContent">
      <div class="card-header">
        <span>添加优惠券</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="addCont">
      <div class="addInput">
        <!-- 活动名称 -->
        <div class="everyBox">
          <label for="activityName">*活动名称
            <input type="text" " id=" acName" class="Input-box">
          </label>
        </div>
        <!-- 设置规则 -->
        <div class="addRules everyBox">
          <label for="activityTime">*设置规则
            <span>满</span><input type="text" id="allMoney" class="Input-box"><span>元&nbsp;&nbsp;抵</span>
            <input type="text" id="subtractMoney" class="Input-box">
          </label>
        </div>
        <!-- 有效时间 -->
        <div class="addTime">
          <label for=""><span class="addName">设置有效时间</span>
            <input class="Input-box" type="datetime-local" id="activityTime">
            <span class="addName">至</span>
            <input type="datetime-local" class="Input-box" id="endTime">
          </label>
        </div>
        <!-- 已选商品 -->
        <div class="addTable everyBox">
          <table class="table-bordered">
            <span class="addName">*已选商品</span>
            <tr class="add_header">
              <th>商品信息</th>
              <th>商品价格</th>
              <th>操作</th>
            </tr>
            <!-- 添加选中的货品信息 -->
            <tbody id="commodity_choose"></tbody>
            <tr>
              <td colspan="3" id="SelectItem" class="del_com">选择货品</td>
            </tr>
          </table>
        </div>
        <!-- 参与会员等级 -->
        <div class="vipBox">
          <span class="addName">*参与会员等级</span>
          <label for="one">
            <input type="checkbox" name="vip" id="one">
            等级一
          </label>
          <label for="two">
            <input type="checkbox" name="vip" id="two">
            等级二
          </label>
          <label for="three">
            <input type="checkbox" name="vip" id="three">
            等级三
          </label>
          <label for="four">
            <input type="checkbox" name="vip" id="four">
            等级四
          </label>
        </div>
        <!-- 参与分组 -->
        <div class="btn-group">
          <span class="addName">*参与会员等级</span>
          <label for="one">
            <input type="checkbox" name="group" id="one">
            全部用户
          </label>
          <label for="one">
            <input type="checkbox" name="group" id="one">
            分组一
          </label>
          <label for="two">
            <input type="checkbox" name="group" id="two">
            分组二
          </label>
          <label for="three">
            <input type="checkbox" name="group" id="three">
            分组三
          </label>
          <label for="four">
            <input type="checkbox" name="group" id="four">
            分组四
          </label>
        </div>
        <div class="anniu">
          <button id="save" class="btn btn-info font">保存</button>
          <button id="cancel" class="btn btn-info font">取消</button>
        </div>
      </div>
    </div>
    <!-- 选择货品 -->
    <div class="modalItem">
      <div class="modal_details">
        <div class="inputBox">
          <p>选择货品</p>
          <p id="quitItem">X</p>
        </div>
      </div>
      <div class="contentBox">
        <div class="input_item">
          <div>
            <label for="itemName">商品名称
              <input type="text" name="name" id="itemName">
            </label>
            <label for="brand">商品品牌
              <select class="styIn" id="brand">
                <option value="change">请选择</option>
                <option value="进行中">李宁</option>
                <option value="结束">乔丹</option>
                <option value="结束">回力</option>
                <option value="结束">鸿星尔克</option>
              </select>
            </label>
            <label for="first_level">一级分类
              <select class="styIn" id="first_level">
                <option value="change">请选择</option>
                <option value="进行中">鞋</option>
                <option value="结束">裤子</option>
                <option value="结束">外套</option>
                <option value="结束">T恤</option>
                <option value="结束">帽子</option>
              </select>
            </label>
          </div>
          <div>
            <label for="country">国家
              <select class="styIn" id="country">
                <option value="change">请选择</option>
                <option value="中国">中国</option>
                <option value="俄罗斯">俄罗斯</option>
                <option value="埃及">埃及</option>
                <option value="巴基斯坦">巴基斯坦</option>
                <option value="日子过得不错的">日子过得不错的</option>
                <option value="小西八">小西八</option>
              </select>
            </label>
            <label for="type_trade">贸易类型
              <select class="styIn" id="type_trade">
                <option value="change">请选择</option>
                <option value="一般贸易">一般贸易</option>
                <option value="加工贸易">加工贸易</option>
                <option value="无形贸易">无形贸易</option>
                <option value="转口贸易">转口贸易</option>
                <option value="过境贸易">过境贸易</option>
              </select>
            </label>
            <label for="Secondary">二级分类
              <select class="styIn" id="Secondary">
                <option value="change">请选择</option>
                <option value="春季">春季</option>
                <option value="夏季">夏季</option>
                <option value="秋季">秋季</option>
                <option value="冬季">冬季</option>
              </select>
            </label>
          </div>
          <div>
            <button class="searchBox">搜索</button>
            <label for="shelves">是否上架
              <select class="styIn" id="shelves">
                <option value="change">请选择</option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </label>
            <label for="Three_level">三级分类
              <select class="styIn" id="Three_level">
                <option value="change">请选择</option>
                <option value="普通">普通</option>
                <option value="定制">定制</option>
              </select>
            </label>
          </div>
        </div>
        <div class="anniuBox">
          <button id="SelectAll">全选本页</button>
        </div>
        <div class="tableBox">
          <table class="table-bordered">
            <tr>
              <th><input type="checkbox" id="SelectAllBox"></th>
              <th>商品信息</th>
              <th>品牌</th>
              <th>价格</th>
              <th>分类</th>
              <th>是否上架</th>
            </tr>
            <tbody id="commodity_In"></tbody>
          </table>
        </div>
        <div class="pageBox_item">
          <div>
            已选
            <span id="number_com">0</span>
            货品
          </div>
          <nav class="paginationBox">
            <ul class="pagination">
              <li class="styPage" id="previous">
                <span>&laquo;</span>
              </li>
              <div id="commodity_page"></div>
              <li class="styPage" id="next">
                <span>&raquo;</span>
              </li>
            </ul>
          </nav>
        </div>
        <div class="button_box">
          <button>保存</button>
          <button>取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑满减 -->
  <div class="container-fluid" id="editBox">
    <!-- 标题 -->
    <div class="row indexContent">
      <div class="card-header">
        <span>编辑优惠券</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="addCont">
      <div class="addInput">
        <!-- 活动名称 -->
        <div class="everyBox">
          <label for="editName">*活动名称
            <input type="text" " id=" editName" class="Input-box">
          </label>
        </div>
        <!-- 设置规则 -->
        <div class="addRules everyBox">
          <label for="editAllMoney">*设置规则
            <span>满</span><input type="text" id="editAllMoney" class="Input-box"><span>元&nbsp;&nbsp;抵</span>
            <input type="text" id="editSubtractMoney" class="Input-box">
          </label>
        </div>
        <!-- 有效时间 -->
        <div class="addTime">
          <label for=""><span class="addName">设置有效时间</span>
            <input class="Input-box" type="datetime-local" id="editActivityTime">
            <span class="addName">抵</span>
            <input type="datetime-local" class="Input-box" id="editEndTime">
          </label>
        </div>
        <!-- 已选商品 -->
        <div class="addTable everyBox">
          <table class="table-bordered">
            <span class="addName">*已选商品</span>
            <tr class="add_header">
              <th>商品信息</th>
              <th>商品价格</th>
              <th>操作</th>
            </tr>
            <!-- 添加选中的货品信息 -->
            <tr>
              <td>XXXXX</td>
              <td>XXXXX</td>
              <td>删除</td>
            </tr>
            <tr>
              <td>XXXXX</td>
              <td>XXXXX</td>
              <td>删除</td>
            </tr>
            <tr>
              <td colspan="3">选择货品</td>
            </tr>
          </table>
        </div>
        <!-- 参与会员等级 -->
        <div class="vipBox">
          <span class="addName">*参与会员等级</span>
          <label for="one">
            <input type="checkbox" name="vip" id="one">
            等级一
          </label>
          <label for="two">
            <input type="checkbox" name="vip" id="two">
            等级二
          </label>
          <label for="three">
            <input type="checkbox" name="vip" id="three">
            等级三
          </label>
          <label for="four">
            <input type="checkbox" name="vip" id="four">
            等级四
          </label>
        </div>
        <!-- 参与分组 -->
        <div class="btn-group">
          <span class="addName">*参与会员等级</span>
          <label for="one">
            <input type="checkbox" name="group" id="one">
            全部用户
          </label>
          <label for="one">
            <input type="checkbox" name="group" id="one">
            分组一
          </label>
          <label for="two">
            <input type="checkbox" name="group" id="two">
            分组二
          </label>
          <label for="three">
            <input type="checkbox" name="group" id="three">
            分组三
          </label>
          <label for="four">
            <input type="checkbox" name="group" id="four">
            分组四
          </label>
        </div>
        <div class="anniu">
          <button id="editSave" class="btn btn-info font">保存</button>
          <button id="editCancel" class="btn btn-info font">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 发放优惠券 -->

</body>

</html>